<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>商品列表</title>
    <link rel="stylesheet" href="./stylesheets/goodslist.css">
    <style>
        .jingubang{
            height: 600px;
        }
    </style>
</head>
<body>
    
<!-- list==================================end============================ -->
<!-- <div class="jingubang"></div> -->
<div class="dm-content-wrap">

        <div class="dm-content dm-content-1">
            <div class="head">
                <span class="head-title">演唱会</span>
                <a href="javascript:void(0)">
                    <span class="head-more">查看全部</span>
                </a>
            </div>

            <div class="box" id="concert-wrap">
                
                <a href="#" class="box-left">
                    <!-- <img class="box-left__bg" src="http://img.alicdn.com/tfs/TB1WDcISkvoK1RjSZFNXXcxMVXa-540-720.png">
                    <div class="box-left__info">
                        <div class="title">…… </div>
                    </div> -->
                </a>
                
                <div class="box-right">
                    <!-- <a href="#" class="box-right__item">
                        <div class="itemimg">
                            <img src="http://img.alicdn.com/tfs/TB1WDcISkvoK1RjSZFNXXcxMVXa-540-720.png">
                        </div>
                        <div class="iteminfo">
                            <div class="title" title="">……</div>
                        </div>
                    </a> -->
                </div>

            </div>

        </div>

        <div class="dm-content dm-content-2" data-spm="card_1" style="display: block;">
            
            <div class="head">
                <span class="head-title">话剧歌剧</span>
                <a href="javascript:void(0)">
                    <span class="head-more">查看全部</span>
                </a>
            </div>

            <div class="box" id="drama-wrap">
            
                <a href="#" class="box-left">
                    <!-- <img class="box-left__bg" src="http://img.alicdn.com/tfs/TB1WDcISkvoK1RjSZFNXXcxMVXa-540-720.png">
                    <div class="box-left__info">
                        <div class="title">话剧 </div>
                    </div> -->
                </a>
                
                <div class="box-right">
                    <!-- <a href="#" class="box-right__item">
                        <div class="itemimg">
                            <img src="http://img.alicdn.com/tfs/TB1WDcISkvoK1RjSZFNXXcxMVXa-540-720.png">
                        </div>
                        <div class="iteminfo">
                            <div class="title" title="">……</div>
                        </div>
                    </a> -->
                </div>

            </div>

        </div>

        <div class="dm-content dm-content-3" data-spm="card_2" style="display: block;">
           
            <div class="head">
                <span class="head-title">体育比赛</span>
                <a href="javascript:void(0)">
                    <span class="head-more">查看全部</span>
                </a>
            </div>

            <div class="box" id="sports-wrap">

                <a href="#" class="box-left">
                    <!-- <img class="box-left__bg" src="http://img.alicdn.com/tfs/TB1WDcISkvoK1RjSZFNXXcxMVXa-540-720.png">
                    <div class="box-left__info">
                        <div class="title">…… </div>
                    </div> -->
                </a>
                
                <div class="box-right">
                    <!-- <a href="#" class="box-right__item">
                        <div class="itemimg">
                            <img src="http://img.alicdn.com/tfs/TB1WDcISkvoK1RjSZFNXXcxMVXa-540-720.png">
                        </div>
                        <div class="iteminfo">
                            <div class="title" title="">……</div>
                        </div>
                    </a> -->
                </div>
            </div>

        </div>

        <div class="dm-content dm-content-4" data-spm="card_3" style="display: block;">
            <div class="head">
                <span class="head-title">儿童亲子</span>
                <a href="javascript:void(0)">
                    <span class="head-more">查看全部</span>
                </a>
            </div>
            
            <div class="box" id="goods-wrap">
                
                <a href="#" class="box-left">
                    <!-- <img class="box-left__bg" src="http://img.alicdn.com/tfs/TB1WDcISkvoK1RjSZFNXXcxMVXa-540-720.png">
                    <div class="box-left__info">
                        <div class="title">…… </div>
                    </div> -->
                </a>
                
                <div class="box-right">
                    <!-- <a href="#" class="box-right__item">
                        <div class="itemimg">
                            <img src="http://img.alicdn.com/tfs/TB1WDcISkvoK1RjSZFNXXcxMVXa-540-720.png">
                        </div>
                        <div class="iteminfo">
                            <div class="title" title="">……</div>
                        </div>
                    </a> -->
                </div>
            </div>

        </div>

    </div>

    <div id="box"></div>

    <!-- list==================================end============================ -->
<script>

console.log('this is goodslist');
// 工具的封装
/**
 * @param {选择器} selector 
 */
function $(selector){
    return document.querySelector(selector);
}



fetch('/damai_goodsone').then(res => {
    return res.json();
}).then(data => {
    concertGoods(data.data);
    
})

fetch('/damai_goodstwo').then(res => {
    return res.json();
}).then(data => {
    dramagoods(data.data);
    
})

fetch('/damai_goodsthree').then(res => {
    return res.json();
}).then(data => {
    sportGoods(data.data);
    
})

fetch('/damai_goodsfour').then(res => {
    return res.json();
}).then(data => {
    childrenGoods(data.data);
    lazyload("#lazyload-img")

})


function  concertGoods(data){
    let leftbox = $(".dm-content-1 .box-left");
    let rightbox = $(".dm-content-1 .box-right");
    let [res,htmlleft,htmlright] = [data, '', ''];
    for(let i = 0; i < res.length ;i++){
        let item = res[i];
        if(i === 0){
            
            htmlleft +=`<img class="box-left__bg" id="lazyload-img" src="http://img.alicdn.com/tfs/TB1WDcISkvoK1RjSZFNXXcxMVXa-540-720.png" data-src="${item.verticalPic}">
                        <div class="box-left__info">
                            <div class="title">${res[i].name}</div>
                            <div class="details">${res[i].formattedPriceStr.replace(/[^0-9]+\w+/g, '')}<span>起</span></div>
                        </div>`
            leftbox.innerHTML = htmlleft;
        }else{
            htmlright +=`<a href="#" class="box-right__item">
                            <div class="itemimg">
                            <img id="lazyload-img" src="http://img.alicdn.com/tfs/TB1WDcISkvoK1RjSZFNXXcxMVXa-540-720.png" data-src="${item.verticalPic}">
                            </div>
                            <div class="iteminfo">
                                <div class="title" title="${item.name}">${item.name}</div>
                                <div class="venue">${item.venueName}</div>
                                <div class="showtime">${item.showTime}</div>
                                <div class="price">${item.formattedPriceStr.replace(/[^0-9]+\w+/g, '')}<span>起</span></div>
                            </div>
                        </a>`
            rightbox.innerHTML = htmlright;
        }
        
    }
    
    
}


function  dramagoods(data){
    let leftbox = $(".dm-content-2 .box-left");
    let rightbox = $(".dm-content-2 .box-right");
    let [res,htmlleft,htmlright] = [data, '', ''];

    for(let i = 0; i < res.length ;i++){
        let item = res[i];
        if(i === 0){
            
            htmlleft +=`<img class="box-left__bg" id="lazyload-img" src="http://img.alicdn.com/tfs/TB1WDcISkvoK1RjSZFNXXcxMVXa-540-720.png" data-src="${item.verticalPic}">
                        <div class="box-left__info">
                            <div class="title">${res[i].name}</div>
                            <div class="details">${res[i].formattedPriceStr.replace(/[^0-9]+\w+/g, '')}<span>起</span></div>
                        </div>`
            leftbox.innerHTML = htmlleft;
        }else{
            htmlright +=`<a href="#" class="box-right__item">
                            <div class="itemimg">
                            <img id="lazyload-img" src="http://img.alicdn.com/tfs/TB1WDcISkvoK1RjSZFNXXcxMVXa-540-720.png" data-src="${item.verticalPic}">
                            </div>
                            <div class="iteminfo">
                                <div class="title" title="${item.name}">${item.name}</div>
                                <div class="venue">${item.venueName}</div>
                                <div class="showtime">${item.showTime}</div>
                                <div class="price">${item.formattedPriceStr.replace(/[^0-9]+\w+/g, '')}<span>起</span></div>
                            </div>
                        </a>`
            rightbox.innerHTML = htmlright;
        }
        
    }
    
}


function  sportGoods(data){
    let leftbox = $(".dm-content-3 .box-left");
    let rightbox = $(".dm-content-3 .box-right");
    let [res,htmlleft,htmlright] = [data, '', ''];

    for(let i = 0; i < res.length ;i++){
        let item = res[i];
        if(i === 0){
            
            htmlleft +=`<img class="box-left__bg" id="lazyload-img" src="http://img.alicdn.com/tfs/TB1WDcISkvoK1RjSZFNXXcxMVXa-540-720.png" data-src="${item.verticalPic}">
                        <div class="box-left__info">
                            <div class="title">${res[i].name}</div>
                            <div class="details">${res[i].formattedPriceStr.replace(/[^0-9]+\w+/g, '')}<span>起</span></div>
                        </div>`
            leftbox.innerHTML = htmlleft;
        }else{
            htmlright +=`<a href="#" class="box-right__item">
                            <div class="itemimg">
                            <img id="lazyload-img" src="http://img.alicdn.com/tfs/TB1WDcISkvoK1RjSZFNXXcxMVXa-540-720.png" data-src="${item.verticalPic}">
                            </div>
                            <div class="iteminfo">
                                <div class="title" title="${item.name}">${item.name}</div>
                                <div class="venue">${item.venueName}</div>
                                <div class="showtime">${item.showTime}</div>
                                <div class="price">${item.formattedPriceStr.replace(/[^0-9]+\w+/g, '')}<span>起</span></div>
                            </div>
                        </a>`
            rightbox.innerHTML = htmlright;
        }
        
    }
    
}


function  childrenGoods(data){
    let leftbox = $(".dm-content-4 .box-left");
    let rightbox = $(".dm-content-4 .box-right");
    let [res,htmlleft,htmlright] = [data, '', ''];

    for(let i = 0; i < res.length ;i++){
        let item = res[i];
        if(i === 0){
            
            htmlleft +=`<img class="box-left__bg" id="lazyload-img" src="http://img.alicdn.com/tfs/TB1WDcISkvoK1RjSZFNXXcxMVXa-540-720.png" data-src="${item.verticalPic}">
                        <div class="box-left__info">
                            <div class="title">${res[i].name}</div>
                            <div class="details">${res[i].formattedPriceStr.replace(/[^0-9]+\w+/g, '')}<span>起</span></div>
                        </div>`
            leftbox.innerHTML = htmlleft;
        }else{
            htmlright +=`<a href="#" class="box-right__item">
                            <div class="itemimg">
                            <img id="lazyload-img" src="http://img.alicdn.com/tfs/TB1WDcISkvoK1RjSZFNXXcxMVXa-540-720.png" data-src="${item.verticalPic}">
                            </div>
                            <div class="iteminfo">
                                <div class="title" title="${item.name}">${item.name}</div>
                                <div class="venue">${item.venueName}</div>
                                <div class="showtime">${item.showTime}</div>
                                <div class="price">${item.formattedPriceStr.replace(/[^0-9]+\w+/g, '')}<span>起</span></div>
                            </div>
                        </a>`
            rightbox.innerHTML = htmlright;
        }
        
    }
    
}

var timer = null;
var cHeight = document.documentElement.clientHeight;
function lazyload(selector){
      let imgList = document.querySelectorAll(selector);
    //   console.log(imgList.offsetParent.offsetParent.offsetParent.offsetParent.offsetTop);
      // 元素的offset操作会导致页面回流;
      let itemArray = Array.from(imgList).map(item => {
            // console.log(item.getAttribute("data-src"));
            return {
                  img : item,
                  top : item.offsetParent.offsetParent.offsetTop,
                  src : item.getAttribute("data-src"),
            }
      })
      console.log(itemArray);

      load(itemArray);
      window.addEventListener("scroll",load.bind(null,itemArray));
}

function load(itemArray){
      if(timer !== null) return ;
      // console.log(1);
      timer = setTimeout( () => {
            //比对;
            var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
            var min = scrollTop + cHeight;
            itemArray.forEach( item => {
                  if(item.top < min){
                        item.img.src = item.src;
                  }
            })

            timer = null;
      },300)
}


</script>
</body>
</html>